<template>
  <div>
    <h1>修改密码</h1>
    <el-form label-width="120px" :model="formModel"
    :rules="rules" ref="myform">
      <el-form-item label="原密码" prop="old_pwd"> 
        <el-input placeholder="原密码" v-model="formModel.old_pwd"></el-input>
      </el-form-item>
       <el-form-item label="新密码" prop="new_pwd"> 
        <el-input placeholder="新密码" v-model="formModel.new_pwd"></el-input>
      </el-form-item>
       <el-form-item label="确认密码" prop="re_pwd"> 
        <el-input placeholder="确认密码" v-model="formModel.re_pwd"></el-input>
      </el-form-item>
      <el-form-item>
           <el-button type="primary" @click="toEditPass">提交修改</el-button>
           <el-button @click="toRes">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
  import {reactive,ref} from 'vue'
  import {userUpdatePasswordService} from '@/api/use'
  import {useRouter} from 'vue-router'
  let router=useRouter();
  interface Ipass{
      old_pwd:string,
      new_pwd:string,
      re_pwd:string
  }
 

  // 用来v-model的数据
  let formModel:Ipass=reactive({
       old_pwd:'', //旧密码
       new_pwd:'' ,//新密码
       re_pwd:''  // 确认密码
  })
  // 验证规则的数据
  let rules={
    old_pwd:[
      {required:true,message:"原密码必填",trigger:"blur"},
      {min:6,max:15,message:"原密码在6-15之间",trigger:"blur"}
    ],
    new_pwd:[
      {required:true,message:"原密码必填",trigger:"blur"},
      {min:6,max:15,message:"新密码在6-15之间",trigger:"blur"}
    ],
    re_pwd:[ //确认密码
       {required:true,message:"确认密码必填",trigger:"blur"},
       { //validator 自定义验证规则函数
              validator: (rule:any, value:string, callback:any) => {
                // 判断 value 和 当前 form 中收集的 password 是否一致
                // value当前输入框的值
                console.log(rule)
                    if (value !== formModel.new_pwd) {
                      callback(new Error('两次输入密码不一致'))
                    } else {
                      callback() // 就算校验成功，也需要callback
                    }
              },
              trigger: 'blur'
        }
    ]
  }
  // 点击按钮 提交修改密码
    let toEditPass=async ()=>{
      // reactive的数据不需要.value
      // ref 和需要js中操作加.value
      let res=await userUpdatePasswordService(formModel)
      console.log(res,"888888999999999")
      if(res.code==0){
        ElMessage.success("修改密码成功")
          router.push("/login")
       
      }
    }

 // vue3 ref获取组件
  let myform=ref()
    let toRes=()=>{
      // 调用表单组件自带的重置方法
       myform.value.resetFields()
    }

</script>
